<template>
  <div>
    <a-button :disabled="!row.voiceUrl" :icon="h(PlayCircleOutlined)" type="primary" @click="handlePlayVideo">播放音频
    </a-button>

    <a-modal v-model:open="open" :footer="false" :maskClosable="true" :title="form.title"
             @cancel="handleCancel">
      <div>
        <span>{{ row.topicContent }}</span>
      </div>
      <audio ref="AudioRef" :src="form.voiceUrl" autoplay class="w-full mt-5" controls>
        浏览器不支持音频播放。
      </audio>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { h, reactive, ref, toRefs } from 'vue'
import { PlayCircleOutlined } from '@ant-design/icons-vue'


// 引用声明
const props = defineProps({
  row: {
    type: Object,
    required: true
  }
})


// 响应式数据
const AudioRef = ref<HTMLAudioElement>()
const state = reactive({
  open: false,
  form: {
    title: '',
    voiceUrl: ''
  }
})

// 响应式数据解析
const { open, form } = toRefs(state)

// 打开事件
const handlePlayVideo = () => {
  console.log(props.row)
  form.value.title = props.row.topicTitle
  form.value.voiceUrl = props.row.voiceUrl
  open.value = true
}

// 取消
const handleCancel = () => {
  AudioRef.value.pause();
}


</script>
<style lang="scss" scoped>

</style>
